<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>购票客户端</title>
	<!--
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	-->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
		  integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">


</head>
<body>
<div id="app">
	<div class="container">
		<table class="table">
			<tr>
				<td>id</td>
				<td>电影名</td>
				<td>总票数</td>
				<td>操作</td>
			</tr>
			<tr v-for="(m,i) in movies" :key="m.id">
				<td>{{m.id}}</td>
				<td>{{m.movieName}}</td>
				<td>{{m.num}}</td>
				<td><input type="button" class="btn-block" @click="handleClick(m.id)" value="购票"></td>
			</tr>
		</table>
		<div>
			<input type="button" class="btn-block" value="刷新" @click="refresh">
			<table class="table">
				<tr>
					<td>订单编号</td>
					<td>电影名</td>
					<td>订单状态</td>
				</tr>
				<tr v-for="(order,i) in orders" :key="i">
					<td>{{order.orderId}}</td>
					<td>{{order.movieName}}</td>
					<td>{{order.status === 0 ? "预定成功 ,出票中" : "已出票"}}</td>
				</tr>
			</table>
		</div>
	</div>
</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                movies: {
                    type: Array,
                    default: {
                        return: []
                    }
                },
                hasOrder: false,
                orders: {
                    type: Array,
                    default: {
                        return: []
                    }
                }
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                axios.get('/client/getMovies')
                    .then(
                        res => {
                            this.movies = res.data;
                        }
                    )
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });

                axios.get('/client/orders')
                    .then(
                        res => {
                            this.orders = res.data;
                        }
                    )
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            }
            ,
            handleClick(e) {
                axios.get("/client/booking/" + e).then(res => {
                    if (res.data != null) {
                        let msg = res.data;
                        alert(msg)
                        this.getData()
                    }
                })
            },
            refresh() {
                this.getData();
            }
        },

    });
</script>
</html>